<script lang='ts' setup name='DeprtmentEdit'>  


 import { ref ,reactive, onBeforeMount} from 'vue' 
 import type { Department } from "@/api/types";
 import http from "@/utils/request";
 import { ElMessage } from 'element-plus'

const {clostDialog,id}  = defineProps(["clostDialog","id"])



 const form = ref<Department>({  name: '', address: '',  leader: '', })




//定义方法
function onSubmit(){
    const url = '/dept/saveOrUpdate'

    http.post<boolean>(url,form.value).then(data=>{
        if (data) {
            ElMessage({ message: '保存成功', type: 'success', })
            clostDialog()
        } else {
         ElMessage({ message: '删除失败了', type: 'error', })
        }
    })
}


onBeforeMount(()=>{
  
  if(id){
    //根据id查询待修改的表单
    const url = '/dept/getById/'+id
    http.get<Department>(url).then(department=>{
        form.value = department;
        console.log("department :",department)
    })
  }
})

</script>  


  
<template>  

<el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="部门名称">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="部门办公地址">
      <el-input v-model="form.address" />
    </el-form-item>
    <el-form-item label="部门主任（领导）">
      <el-input v-model="form.leader" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>  

  
</template>  
  
<style scoped>  

</style>  